<script setup lang="ts">
import {
  Delete,
  Download,
  Upload,
} from '@element-plus/icons-vue'
import type { FormInstance } from 'element-plus'
import { useFileDialog } from '@vueuse/core'
import { CYCLE, defaultQuery } from '../index'
import type { PointInfo } from '@/types'
import { auxiliaryInputApi } from '@/api'
// ------------------use------------------
// #region
const emits = defineEmits<{
  search: []
  reset: []
}>()
const query = defineModel({
  default: () => defaultQuery,
})
const [pointData, setPointData] = useState<PointInfo[]>([])
const {
  open,
  onChange,
  reset: fileReset,
} = useFileDialog({
  accept: '.xlsx',
  multiple: false,
})
// 批量导入
onChange((files: FileList | null) => {
  if (!files)
    return
  auxiliaryInputApi.importExcel({
    file: files[0]!,
    timeType: 2,
  })
  fileReset()
})
// #endregion
// ------------------静态变量------------------
// #region
const rules = generateCurrencyFormRules([
  'timeType',
  'pointId',
])
// #endregion
// ------------------动态变量------------------
// #region

// #endregion
// ------------------ref-----------
// #region
const formRef = ref<FormInstance | null>(null)
// #endregion
// ------------------reactive------
// #region
// #endregion
// ------------------computed------
// #region

// #endregion
// ------------------生命周期------------------
// #region
onBeforeMount(() => {
  getPointData()
})
// #endregion
// ------------------内置方法---------------------
// #region
// #endregion
// ------------------方法---------------------
// #region
async function getPointData() {
  const { data: res } = await pointApi.loadRoleEnergyUnit()
  setPointData(res.list || [])
}
/** 重置 */
async function reset() {
  query.value = { ...defaultQuery }
  await nextTick()
  emits('reset')
}
async function search() {
  const isValid = await formRef.value?.validate().catch()
  if (!isValid)
    return
  await nextTick()
  emits('search')
}
async function downloadTemplate(key: number) {
  const isValid = await formRef.value?.validate().catch()
  if (!isValid)
    return
  auxiliaryInputApi.downloadTemplate({
    pointId: query.value.pointId,
    timeType: key,
  })
}
// #endregion
</script>

<template>
  <el-form
    ref="formRef"
    inline
    :rules="rules"
    :model="query"
    label-width="50px"
    label-position="left"
    class="flex-incompressible width-fill"
  >
    <el-form-item label="周期" prop="timeType">
      <el-select v-model="query.timeType">
        <el-option
          v-for="item in CYCLE"
          :key="item.key"
          :label="item.label"
          :value="item.key"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="点位" prop="pointId">
      <el-cascader
        v-model="query.pointId"
        :options="pointData"
        filterable
        :props="{
          value: 'id',
          label: 'pointName',
          checkStrictly: true,
          emitPath: false,
        }"
        class="width-fill"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <SearchButton @click="search" />
      <el-button plain :icon="Delete" @click="reset">
        清空
      </el-button>
      <el-button
        :icon="Upload"
        type="warning"
        :disabled="!$power('upload')"
        @click="() => open()"
      >
        批量导入
      </el-button>
      <el-dropdown :disabled="!$power('download')">
        <el-button
          type="primary"
          :icon="Download"
          :disabled="!$power('download')"
          class="margin-left-sm"
        >
          下载模板
        </el-button>
        <template #dropdown>
          <el-dropdown-menu style="width: 160px">
            <el-dropdown-item
              v-for="item in CYCLE"
              :key="item.key"
              @click="downloadTemplate(item.key)"
            >
              {{ item.label }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </el-form-item>
  </el-form>
</template>

<style lang="scss" scoped>
//------------------组件样式------------------
//-------------样式穿透-------------
</style>
